<template>
  <view class="container">
    <!-- 固定的顶部区域 -->
    <view class="fixed-header">
      <!-- 顶部安全区域 -->
      <view class="safe-area"></view>

      <!-- 顶部欢迎区 -->
      <view class="header">
        <view class="welcome">
          <text class="welcome-text">Welecome Home！</text>
          <text class="name">{{ userName }}</text>
        </view>
        <image class="avatar" src="../../static/avatar.png" mode="aspectFill"></image>
      </view>
    </view>

    <!-- 内容区域 -->
    <scroll-view scroll-y class="scroll-container">
      <view class="content">
        <!-- 占位，防止内容被顶部遮挡 -->
        <view class="header-placeholder"></view>

        <!-- 能源使用卡片区域 -->
        <swiper class="card-swiper" :indicator-dots="false" @change="handleSwiperChange">
          <!-- 电量使用卡片 -->
          <swiper-item>
            <view class="energy-card" @tap="handleCardClick({type: '电量使用'}, $event)">
              <view class="energy-usages">
                <text>电量使用情况</text>
                <image class="usage-icon" src="../../static/用电量.png" mode="aspectFit"></image>
              </view>
              <view class="line"></view>
              <view class="energy-content">
                <view class="energy-item">
                  <text class="energy-label">今日</text>
                  <view class="energy-value">
                    <text class="energy-icon">↑</text>
                    <text>30.7 kWh</text>
                  </view>
                </view>
                <view class="energy-item">
                  <text class="energy-label">最近一周</text>
                  <view class="energy-value">
                    <text class="energy-icon">↑</text>
                    <text>235.37 kWh</text>
                  </view>
                </view>
              </view>
            </view>
          </swiper-item>

          <!-- 天气卡片 -->
          <swiper-item>
            <view class="weather-card" :class="getWeatherClass">
              <view class="weather-header">
                <view class="location-info">
                  <text class="city-name">{{ locationInfo.city }}</text>
                </view>
              </view>
              <view class="line"></view>
              <view class="weather-content">
                <view class="weather-left">
                  <view class="temp-display">
                    <text class="temp-number">{{ weatherData.temperature }}</text>
                    <text class="temp-unit">°C</text>
                  </view>
                  <text class="weather-desc">{{ weatherData.weather }}</text>
                </view>
                <view class="weather-right">
                  <view class="weather-item">
                    <image class="weather-icon" src="../../static/湿度.png" mode="aspectFit"></image>
                    <text class="weather-label">湿度</text>
                    <text class="weather-value">{{ weatherData.humidity }}</text>
                  </view>
                  <view class="weather-item">
                    <image class="weather-icon" src="../../static/风力.png" mode="aspectFit"></image>
                    <text class="weather-label">风力</text>
                    <text class="weather-value">{{ weatherData.windpower }}级</text>
                  </view>
                  <view class="weather-item">
                    <image class="weather-icon" src="../../static/能见度.png" mode="aspectFit"></image>
                    <text class="weather-label">能见度</text>
                    <text class="weather-value">{{ weatherData.visibility || '良好' }}</text>
                  </view>
                </view>
              </view>
            </view>
          </swiper-item>
        </swiper>

        <!-- 滑动指示点 -->
        <view class="dots">
          <view class="dot" :class="{ active: currentCardIndex === 0 }"></view>
          <view class="dot" :class="{ active: currentCardIndex === 1 }"></view>
        </view>

        <!-- 房间选择 -->
        <!--				<view class="room-selector" :class="currentRoom">
                  <text class="room-option"
                      :class="{ active: currentRoom === 'all' }"
                      @click="switchRoom('all')">全部</text>
                  <text class="room-option"
                      :class="{ active: currentRoom === 'livingRoom' }"
                      @click="switchRoom('livingRoom')">{{roomNames.livingRoom}}</text>
                  <text class="room-option"
                      :class="{ active: currentRoom === 'bedroom' }"
                      @click="switchRoom('bedroom')">{{roomNames.bedroom}}</text>
                  <text class="room-option"
                      :class="{ active: currentRoom === 'kitchen' }"
                      @click="switchRoom('kitchen')">{{roomNames.kitchen}}</text>
                </view>-->

        <view class="room-selector" :class="currentRoom">
          <!-- "全部" 选项 -->
          <text class="room-option"
                :class="{ active: currentRoom === 'all' }"
                @click="switchRoom('all')">
            全部
          </text>

          <!-- 动态渲染分类 -->
          <text class="room-option"
                v-for="category in categories"
                :key="category.id"
                :class="{ active: currentRoom === `room-${category.id}` }"
                @click="switchRoom(category.id)">
            {{ category.categoryName }}
          </text>
        </view>


        <!-- 设备控制卡片 -->
        <!-- 设备控制卡片 -->
        <view class="device-cards">
          <view
              class="device-card"
              v-for="(device, index) in filteredDevices"
              :key="device.id || index"
              @tap="handleCardClick({ type: device.type }, $event)"
          >
            <!-- 正面内容 -->
            <view class="device-header">
              <view class="device-icon">
                <image :src="device.icon" mode="aspectFit"></image>
              </view>
              <view class="device-info">
                <text class="device-title">{{ device.title }}</text>
                <text class="device-subtitle" v-if="device.subtitle">{{ device.subtitle }}</text>
              </view>
              <!-- 开关按钮 -->
              <switch
                  v-if="device.type === '灯光'"
                  class="device-switch"
                  color="#4C6FFF"

              />
            </view>
            <view class="device-data">
              <!-- 温湿度设备 -->
              <template v-if="device.type === 'tempHumidity'">
                <view class="temp-data">
                  <view class="temp-item">
                    <image class="weather-icon" src="../../static/温度.png" mode="aspectFit"></image>
                    <text class="temp-value">{{ device.data.temperature }}°C</text>
                  </view>
                  <view class="humidity-item">
                    <image class="weather-icon" src="../../static/湿度.png" mode="aspectFit"></image>
                    <text class="humidity-value">{{ device.data.humidity }}%</text>
                  </view>
                </view>
              </template>
              <!-- 其他设备 -->
              <template v-else>
                <view class="temp-data">
                  <view class="temp-item">
                    <image
                        class="weather-icon"
                        :src="`../../static/${device.type}小标.png`"
                        mode="aspectFit"
                    ></image>
                    <text class="temp-value">{{ device.data.value }}</text>
                  </view>
                </view>
              </template>
              <!-- 房间分类 -->
              <view class="device-sort">{{ device.deviceCategory }}</view>
            </view>
          </view>
        </view>


      </view>
    </scroll-view>

    <!-- 底部导航栏 -->
    <view class="tab-bar">
      <view class="tab-item" @tap="switchTab('home')" :class="{ active: currentTab === 'home' }" data-tab="home">
        <image
            class="tab-icon"
            :src="getTabIcon('home')"
            mode="aspectFit"
        />
        <text class="tab-text">首页</text>
      </view>
      <view class="tab-item" @tap="switchTab('notify')" :class="{ active: currentTab === 'notify' }" data-tab="notify">
        <image class="tab-icon" :src="getTabIcon('notify')" mode="aspectFit"></image>
        <text class="tab-text">通知</text>
      </view>
      <view class="tab-item tab-item-center">
        <view class="center-button"
              :class="{ active: isCenterActive }"
              @tap="handleCenterClick"
        >
          <image
              :src="isCenterActive ? '../../static/deepseek-active.png' : '../../static/deepseek.png'"
              mode="aspectFit"
          ></image>
        </view>
      </view>
      <view class="tab-item" @tap="switchTab('control')" :class="{ active: currentTab === 'control' }"
            data-tab="control">
        <image class="tab-icon" :src="getTabIcon('control')" mode="aspectFit"></image>
        <text class="tab-text">控制</text>
      </view>
      <view class="tab-item" @tap="switchTab('setting')" :class="{ active: currentTab === 'setting' }"
            data-tab="setting">
        <image class="tab-icon" :src="getTabIcon('setting')" mode="aspectFit"></image>
        <text class="tab-text">设置</text>
      </view>
    </view>
  </view>
</template>

<script>
import index from "./index"

export default index;
</script>


<style>
@import url("../../pages/index/index.css");
</style>
